<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>👾404👾👾</title>

  <style>
    :root {
      box-sizing: border-box;
      cursor: default;
    }

    ::selection {
      color: #11111b;
      background-color: #c0dc67;
    }

    html,
    body {
      user-select: none;
      width: 100%;
      height: 100%;
      background-color: #11111b;
      margin: 0;
      color: #afd33d;
      font-size: calc(6.4px + 0.8125vw);
    }

    .error-body {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .error-body:before {
      content: "";
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #afd33d;
      mix-blend-mode: overlay;
      z-index: 1;
    }

    .error-body:after {
      content: "";
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, #11111b 21px, transparent 1%) center, linear-gradient(#11111b 21px, transparent 1%) center, white;
      background-size: 22px 22px;
      background-position: center;
      opacity: 0.2;
      z-index: 1;
    }

    .error-body .background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      filter: grayscale(1);
      mix-blend-mode: luminosity;
    }

    .error-body .message {
      position: relative;
      width: 100%;
      height: 100%;
      text-align: center;
      z-index: 3;
    }

    .error-body .message h1 {
      position: absolute;
      top: 10%;
      left: 0%;
      width: 100%;
      font-size: 10em;
      margin: 0;
      animation: shake 600ms ease-in-out infinite alternate;
      text-shadow: 0 0 0.07em #afd33d, -0.2em 0 2em rgba(175, 211, 61, 0.3), 0.2em 0 2em rgba(175, 211, 61, 0.3);
      user-select: none;
    }

    .error-body .message h1:before {
      content: attr(t);
      position: absolute;
      left: 50%;
      transform: translate(-50%, 0.34em);
      height: 0.1em;
      line-height: 0.5em;
      width: 100%;
      animation: scan 500ms ease-in-out infinite alternate 380ms, glitch-anim 300ms ease-in-out infinite alternate;
      overflow: hidden;
      opacity: 0.7;
    }

    .error-body .message h1:after {
      content: attr(t);
      position: absolute;
      top: -19px;
      left: 50%;
      transform: translate(-50%, 0.34em);
      height: 0.5em;
      line-height: 0.1em;
      width: 100%;
      animation: scan 665ms ease-in-out infinite alternate 445ms, glitch-anim 300ms ease-in-out infinite alternate;
      overflow: hidden;
      opacity: 0.8;
    }

    .error-body .message .bottom {
      position: absolute;
      top: 65%;
      left: 0;
      width: 100%;
    }

    .error-body .message p,
    .error-body .message a {
      font-size: 2em;
      font-family: monospace;
      text-shadow: 0 0 5px #afd33d;
      filter: blur(0.8px);
    }

    .error-body .message a {
      position: relative;
      color: #afd33d;
      text-decoration: none;
      font-weight: 700;
      border: 2px solid #afd33d;
      text-transform: uppercase;
      padding: 5px 30px;
      box-shadow: inset 0 0 0 0 rgba(175, 211, 61, 0.2);
      transition: 25ms ease-in-out all 0ms;
      overflow: hidden;
      animation: attn 3s ease-in-out infinite;
    }

    .error-body .message a:hover {
      cursor: crosshair;
      box-shadow: inset 0 -2em 0 0 rgba(175, 211, 61, 0.2);
      transition: 225ms ease-in-out all 225ms;
      animation: none;
    }

    .error-body .message a:hover:before,
    .error-body .message a:hover:after {
      transform: translate(-50%, 0) scale(0, 1);
    }

    .error-body .message a:active {
      box-shadow: inset 0 -2em 0 0 rgba(175, 211, 61, 0.5);
      transition: 225ms ease-in-out all 225ms;
    }

    .error-body .message a:before,
    .error-body .message a:after {
      content: "";
      position: absolute;
      left: 50%;
      transform: translate(-50%, 0) scale(1, 1);
      transform-origin: center;
      background-color: #11111b;
      width: 90%;
      height: 5px;
      transition: 225ms ease-in-out all;
      mix-blend-mode: hard-light;
    }

    .error-body .message a:before {
      top: -4px;
    }

    .error-body .message a:after {
      bottom: -4px;
    }

    @keyframes scan {

      from,
      20%,
      100% {
        height: 0;
        transform: translate(-50%, 0.44em);
      }

      10%,
      15% {
        height: 1em;
        line-height: 0.2em;
        transform: translate(-55%, 0.23em);
      }
    }

    @keyframe pulse {
      from {
        text-shadow: 0 0 0 #afd33d, 0 0 0 rgba(175, 211, 61, 0.3), 0 0 0 rgba(175, 211, 61, 0.3);
      }

      to {
        text-shadow: 0 0 0.07em #afd33d, -0.2em 0 2em rgba(175, 211, 61, 0.3), 0.2em 0 2em rgba(175, 211, 61, 0.3);
      }
    }

    @keyframes attn {

      0%,
      100% {
        opacity: 1;
      }

      30%,
      35% {
        opacity: 0.4;
      }
    }

    @keyframes shake {

      0%,
      100% {
        transform: translate(-1px, 0);
      }

      10% {
        transform: translate(2px, 1px);
      }

      30% {
        transform: translate(-3px, 2px);
      }

      35% {
        transform: translate(2px, -3px);
        filter: blur(4px);
      }

      45% {
        transform: translate(2px, 2px) skewY(-8deg) scale(0.96, 1);
        filter: blur(0);
      }

      50% {
        transform: translate(-3px, 1px);
      }
    }

    @keyframes glitch-anim {
      0% {
        clip: rect(56px, 9999px, 28px, 0);
      }

      10% {
        clip: rect(7px, 9999px, 39px, 0);
      }

      20% {
        clip: rect(62px, 9999px, 59px, 0);
      }

      30% {
        clip: rect(66px, 9999px, 9px, 0);
      }

      40% {
        clip: rect(64px, 9999px, 26px, 0);
      }

      50% {
        clip: rect(15px, 9999px, 89px, 0);
      }

      60% {
        clip: rect(4px, 9999px, 70px, 0);
      }

      70% {
        clip: rect(83px, 9999px, 44px, 0);
      }

      80% {
        clip: rect(95px, 9999px, 31px, 0);
      }

      90% {
        clip: rect(26px, 9999px, 48px, 0);
      }

      100% {
        clip: rect(16px, 9999px, 36px, 0);
      }
    }
  </style>

</head>

<body>
  <section class="error-body">
    <video preload="auto" class="background" src="./static/mp4/err.mp4" autoplay
      muted loop></video>
    <div class="message">
      <h1 t="404">404</h1>
      <div class="bottom">
        <p>You have lost your way</p>
        <a href="/">return home</a>
      </div>
    </div>
  </section>
</body>

</html>